<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>user register</title>

<link rel="stylesheet" href="../css/css1.css" type="text/css" />
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>
<script type="text/javascript" src="../js/myValidate.js"></script>
</head>

	<script>
	<!--

	
	function doCheck() {
		var name = document.getElementById("userRegisterForm:name").value;
		var password = document.getElementById("userRegisterForm:password").value;
		var passwordConfirm = document.getElementById("userRegisterForm:passwordConfirm").value;
		var birthdate = document.getElementById("userRegisterForm:birthdateInputDate").value;
		if(name == "" || name == null) {
			alert("enter your name plz");
			return false;
		}
		if(password == "" || password == null) {
			alert("enter your password plz");
			return false;
		}
		if(passwordConfirm == "" || password == null) {
			alert("confirm your password plz");
			return false;
		}
		if(birthdate == "" || birthdate == null) {
			alert("enter your birthdate plz");
			return false;
		}
		if(password != passwordConfirm) {
			alert("there is different between the password and passwordconfirm!");
			return false;
		}
		if(password.length < 4 || password.length > 10) {
			alert("password's length must be 4-10");
			return false;
		}
		return true;
	}
	
	function formValidate() {
		if(doCheck() == false) {
			return;
		} else {
			document.getElementById("userRegisterForm:OK2").click();
			alert("register success");
		}
	}
	-->
	</script>

<f:view>
<body>
	<h:form id="userRegisterForm">
			<p align = "center">
				user - register
			</p>
		<table id = "user-register-table" class="DataTable"  align = "center">
			<tr>
				<td class="TxtRight">
				 	<h:outputLabel value="name"/>
				</td>
				<td class="TxtLeft">
					<h:inputText id="name" value="#{UserManagedBean.insertVo.name }" maxlength = "16"/>
				</td>
			</tr>
			
			<tr>
				<td class="TxtRight">
					<h:outputLabel value="email"/>
				</td>
				<td class="TxtLeft">
					<h:inputText id="email" value="#{UserManagedBean.insertVo.email }" maxlength = "64"/>
				</td>
			</tr>
						
			<tr>
				<td class="TxtRight">
					<h:outputLabel value="password"/>
				</td>
				<td class="TxtLeft">
					<h:inputSecret id="password" value="#{UserManagedBean.insertVo.password }" maxlength="10"/>
				</td>
			</tr>
			
			<tr>
				<td class="TxtRight">
					<h:outputLabel value="passwordConfirm"/>
				</td>
				<td class="TxtLeft">
					<h:inputSecret id="passwordConfirm" value="#{UserManagedBean.insertVo.password }" maxlength="10"/>
				</td>
			</tr>
			
			<tr>
				<td class="TxtRight">
					<h:outputLabel value="gender"/>
				</td>
				<td class="TxtLeft">
					<h:selectOneMenu value="#{UserManagedBean.insertVo.gender }">
					     <f:selectItem itemLabel="male" itemValue="0"/>
					     <f:selectItem itemLabel="female" itemValue="1"/>
					</h:selectOneMenu>
				</td>
			</tr>
			
			<tr>
				<td class="TxtRight">
					<h:outputLabel value="birthdate"/>
				</td>
				<td class="TxtLeft">
				<rich:calendar id="birthdate" 
					value="#{UserManagedBean.insertVo.birthdate }"
					isDayEnabled="preventAheadTime"
					datePattern="yyyy-MM-dd" popup="true" inputSize="23"
					inputClass="inputText" enableManualInput="false" 
					/>
				</td>
			</tr>
			
			<tr  align="center">
				<td class="TxtCenter">
					<a4j:commandButton id="OK1" value="OK" 
						onclick="formValidate()"  />
					<a4j:commandButton id="OK2" value="OK2" 
						style="display:none" 
						action="#{UserManagedBean.insertUser}"  />
				</td>
				<rich:spacer styleClass="LinkRichSpacer"/>
				<td class="TxtCenter">
					<a4j:commandButton id = "login" value="login now"
						action="#{UserManagedBean.forUserLogin }"/>
						
				</td>
			</tr>
			<tr>

			</tr>
			<!-- 
			<tr>
				<td>
					<a4j:commandButton id="selectList" value="selectList" 
						action="#{UserManagedBean.forUserList}" />
				</td>
			</tr>
			 -->
		</table>
	</h:form>
</body>
</f:view>
</html>